<template>
  <div class="divLocationViewCondition">
    <div class="divAreaTop">
      <div class="divTitle">库区选择</div>
      <div class="divWarehouseSelect">
        <el-select placeholder="请选择仓库" v-model="warehouseId" @change="warehouseChange" style="width:100%">
          <el-option v-for="item in warehouseData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class="divAreaContent">
      <div class="divAreaCondition">
        <el-input placeholder="请输入库区的名称" v-model="areaName">
          <i
            class="el-icon-search el-input__icon"
            slot="suffix"
            >
          </i>
        </el-input>
      </div>
      <div class="divAreaDetails">
          <div class="divNoArea" v-if="areaData.length === 0">
            <div class="divFontDisplay">暂无库区</div>
            <base-button class="importantButton" @click="btnAddAreaClick">新增库区</base-button>
          </div>
          <div v-else class="divAreaList">
              <el-scrollbar wrap-class="scrollbar-wrapper">
                <div :class="{ 'divAreaItem': true, 'itemActive': item.id === areaId }" v-for="item in areaData" :key="item.id" :title="item.name" @click="areaId = item.id">{{item.name}}</div>
              </el-scrollbar>
          </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { getAllWarehouse } from '@/module-base/api/warehouse'
import { getAllAreaList } from '@/module-base/api/area'
import BaseButton from '@/components/base-button/index.vue'

@Component({
  name: 'ComponentCondition',
  components: {
    BaseButton
  }
})

export default class extends Vue {
  private warehouseId = ''

  private warehouseData = []

  private areaId =''// 默认是第一项内容

  private areaName= ''

  private areaData = []

  created() {
    this.initData()
  }

  @Watch('areaId')
  private onAreaIdChange(value:string) {
    (this.$parent as any).areaId = value
  }

  @Watch('areaName')
  private onAreaNameChange() {
    this.iSearchAreaClick()
  }

  private async initData() {
    const { data } = await getAllWarehouse({ status: 1 })
    this.warehouseData = data
    if (Array.isArray(data) && data.length > 0) {
      this.warehouseId = data[0].id
    } else {
      this.warehouseId = ''
      const parent = this.$parent as any
      parent.loading = false
    }
    this.getAreaData()
  }

  private async getAreaData() {
    const { data } = await getAllAreaList({ warehouseId: this.warehouseId, status: 1 })
    this.areaData = data
    if (Array.isArray(data) && data.length > 0) {
      this.areaId = data[0].id
    } else {
      this.areaId = ''
      const parent = this.$parent as any
      parent.loading = false
    }
  }

  private warehouseChange(value:string) {
    this.warehouseId = value
    this.getAreaData()
  }

  private btnAddAreaClick() {
    // if (this.confirmMsg()) {
    //   return
    // }
    // this.$router.push({ path: 'area/details/null' })
  }

  private async iSearchAreaClick() {
    const { data } = await getAllAreaList({ warehouseId: this.warehouseId, like_name: this.areaName, status: 1 })
    this.areaData = data
    if (Array.isArray(data) && data.length > 0) {
      this.areaId = data[0].id
    } else {
      this.areaId = ''
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
